<template>
  <div class="order-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">订单管理</h2>
      <el-button type="primary" icon="el-icon-plus" @click="showAddDialog = true">
        生成订单
      </el-button>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon pending">
              <i class="el-icon-time"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.pending }}</div>
              <div class="stat-label">待支付</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon paid">
              <i class="el-icon-success"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.paid }}</div>
              <div class="stat-label">已支付</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon completed">
              <i class="el-icon-check"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.completed }}</div>
              <div class="stat-label">已完成</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon refunded">
              <i class="el-icon-refresh-left"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.refunded }}</div>
              <div class="stat-label">已退款</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 搜索筛选区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderSn" placeholder="请输入订单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="searchForm.userName" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="场地名称">
          <el-input v-model="searchForm.venueName" placeholder="请输入场地名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.orderStatus" placeholder="请选择订单状态" clearable>
            <el-option label="待支付" :value="0"></el-option>
            <el-option label="已支付" :value="1"></el-option>
            <el-option label="已完成" :value="2"></el-option>
            <el-option label="已取消" :value="3"></el-option>
            <el-option label="已退款" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约日期">
          <el-date-picker
            v-model="searchForm.periodDate"
            type="date"
            placeholder="选择预约日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订单列表 -->
    <el-card class="table-card" shadow="never">
      <div class="table-header">
        <div class="table-title">订单列表</div>
        <div class="table-actions">
          <el-button size="small" icon="el-icon-download" @click="handleExport">导出</el-button>
          <template v-if="selectedOrders.length >= 0">
               <el-button size="small" type="danger" icon="el-icon-delete" @click="handleBatchDelete" :disabled=true>批量删除</el-button>
          </template>
        </div>
      </div>
      
      <el-table 
        :data="orderList" 
        v-loading="loading" 
        stripe
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="orderSn" label="订单号" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userName" label="用户" width="120"></el-table-column>
        <el-table-column prop="venueName" label="场地" min-width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="partitionName" label="分区" width="100"></el-table-column>
        <el-table-column prop="courtIndex" label="场地" width="80">
          <template slot-scope="scope">
            {{ scope.row.courtIndex }}号场
          </template>
        </el-table-column>
        <el-table-column prop="periodDate" label="预约日期" width="120"></el-table-column>
       <!-- <el-table-column label="时间段" width="160">
          <template slot-scope="scope">
            {{ formatTime(scope.row.beginTime) }} - {{ formatTime(scope.row.endTime) }}
          </template>
        </el-table-column> -->
        <el-table-column label="时间段" width="160">
                  <template  prop="beginTime" slot-scope="scope">
                    {{ scope.row.beginTime}} - {{ scope.row.endTime }}
                  </template>
        </el-table-column>
        <el-table-column prop="payAmount" label="金额" width="100">
          <template slot-scope="scope">
            <span class="amount">¥{{ scope.row.payAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.orderStatus)">{{ getStatusLabel(scope.row.orderStatus) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="160">
          <template slot-scope="scope">
            {{ formatDateTime(scope.row.orderTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
            <el-button v-if="scope.row.orderStatus === 1" size="mini" type="warning" icon="el-icon-refresh-left" @click="handleRefund(scope.row)">退款</el-button>
            <el-button v-if="scope.row.orderStatus === 0" size="mini" type="success" icon="el-icon-money" @click="handlePay(scope.row)">支付</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 生成订单对话框 -->
    <el-dialog
      title="生成订单"
      :visible.sync="showAddDialog"
      width="600px"
      :close-on-click-modal="false">
      <el-form :model="orderForm" :rules="orderRules" ref="orderForm" label-width="100px">
        <el-form-item label="场地" prop="venueId">
          <el-select v-model="orderForm.venueId" placeholder="请选择场地" style="width: 100%" @change="handleVenueChange">
            <el-option label="体育中心篮球场" :value="1"></el-option>
            <el-option label="奥林匹克羽毛球馆" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分区" prop="partitionId">
          <el-select v-model="orderForm.partitionId" placeholder="请选择分区" style="width: 100%">
            <el-option label="A区" :value="1"></el-option>
            <el-option label="B区" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场地" prop="courtIndex">
          <el-input-number v-model="orderForm.courtIndex" :min="1" :max="10" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="预约日期" prop="periodDate">
          <el-date-picker
            v-model="orderForm.periodDate"
            type="date"
            placeholder="选择预约日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间" prop="beginTime">
          <el-time-picker
            v-model="orderForm.beginTime"
            placeholder="选择开始时间"
            format="HH:mm"
            value-format="HH:mm"
            style="width: 100%">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-time-picker
            v-model="orderForm.endTime"
            placeholder="选择结束时间"
            format="HH:mm"
            value-format="HH:mm"
            style="width: 100%">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="用户" prop="userId">
          <el-select v-model="orderForm.userId" placeholder="请选择用户" style="width: 100%" @change="handleUserChange">
            <el-option label="张三" :value="1"></el-option>
            <el-option label="李四" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付金额" prop="payAmount">
          <el-input-number v-model="orderForm.payAmount" :min="0" :precision="2" style="width: 100%"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
      </div>
    </el-dialog>

    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      :visible.sync="showDetailDialog"
      width="700px">
      <div class="order-detail" v-if="currentOrder">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ currentOrder.orderSn }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusTagType(currentOrder.orderStatus)">{{ getStatusLabel(currentOrder.orderStatus) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户">{{ currentOrder.userName }}</el-descriptions-item>
          <el-descriptions-item label="场地">{{ currentOrder.venueName }}</el-descriptions-item>
          <el-descriptions-item label="分区">{{ currentOrder.partitionName }}</el-descriptions-item>
          <el-descriptions-item label="场地">{{ currentOrder.courtIndex }}号场</el-descriptions-item>
          <el-descriptions-item label="预约日期">{{ currentOrder.periodDate }}</el-descriptions-item>
          <el-descriptions-item label="时间段">{{ formatTime(currentOrder.beginTime) }} - {{ formatTime(currentOrder.endTime) }}</el-descriptions-item>
          <el-descriptions-item label="支付金额">
            <span class="amount">¥{{ currentOrder.payAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ formatDateTime(currentOrder.orderTime) }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { orderAPI } from '../api/order.js'
import { venueAPI } from '../api/venue.js'
import { timePeriodAPI } from '../api/timePeriod.js'

export default {
  name: 'OrderManagement',
  data() {
    return {
      loading: false,
      submitting: false,
      showAddDialog: false,
      showDetailDialog: false,
      currentOrder: null,
      selectedOrders: [],
      searchForm: {
        orderSn: '',
        userName: '',
        venueName: '',
        orderStatus: '',
        periodDate: ''
      },
      orderForm: {
        venueId: null,
        partitionId: null,
        timePeriodId: 1,
        courtIndex: 1,
        periodDate: '',
        beginTime: '',
        endTime: '',
        userId: null,
        userName: '',
        payAmount: 0
      },
      orderRules: {
        venueId: [{ required: true, message: '请选择场地', trigger: 'change' }],
        partitionId: [{ required: true, message: '请选择分区', trigger: 'change' }],
        courtIndex: [{ required: true, message: '请输入场地号', trigger: 'blur' }],
        periodDate: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
        beginTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        userId: [{ required: true, message: '请选择用户', trigger: 'change' }],
        payAmount: [{ required: true, message: '请输入支付金额', trigger: 'blur' }]
      },
      orderList: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      stats: {
        pending: 0,
        paid: 0,
        completed: 0,
        refunded: 0
      },
      venues: [],
      users: []
    }
  },
  mounted() {
    this.loadVenues()
    this.loadUsers()
    this.loadStatistics()
    this.loadOrderList()
  },
  methods: {
    // 加载订单列表
    async loadOrderList() {
      this.loading = true
      try {
        const params = {
          current: this.pagination.current,
          size: this.pagination.size,
          orderSn: this.searchForm.orderSn || undefined,
          userName: this.searchForm.userName || undefined,
          venueName: this.searchForm.venueName || undefined,
          orderStatus: this.searchForm.orderStatus || undefined,
          periodDate: this.searchForm.periodDate || undefined
        }

        const result = await orderAPI.list(params)
        console.log(result.data.records)
        this.orderList = result.data.records || []
        this.pagination.total = result.data.total || 0
      } catch (error) {
        this.$message.error('加载订单列表失败: ' + error.message)
        // 如果API调用失败，使用模拟数据
        this.loadMockOrderData()
      } finally {
        this.loading = false
      }
    },

    // 加载模拟订单数据（API调用失败时的备用方案）
    loadMockOrderData() {
      const mockData = {
        records: [
          {
            id: 1,
            orderSn: 'ORD202312010001',
            userName: '张三',
            venueName: '体育中心篮球场',
            partitionName: 'A区',
            courtIndex: 1,
            periodDate: '2023-12-15',
            beginTime: { hour: 9, minute: 0 },
            endTime: { hour: 11, minute: 0 },
            payAmount: 120.00,
            orderStatus: 1,
            orderTime: '2023-12-01 14:30:00'
          },
          {
            id: 2,
            orderSn: 'ORD202312010002',
            userName: '李四',
            venueName: '奥林匹克羽毛球馆',
            partitionName: 'B区',
            courtIndex: 3,
            periodDate: '2023-12-16',
            beginTime: { hour: 14, minute: 0 },
            endTime: { hour: 16, minute: 0 },
            payAmount: 80.00,
            orderStatus: 0,
            orderTime: '2023-12-01 15:20:00'
          }
        ],
        total: 2
      }
      
      this.orderList = mockData.records
      this.pagination.total = mockData.total
    },

    // 加载场地列表
    async loadVenues() {
      try {
        const result = await venueAPI.list({ current: 1, size: 100 })
        this.venues = (result.records || []).map(venue => ({
          id: venue.id,
          name: venue.name
        }))
      } catch (error) {
        console.warn('加载场地列表失败，使用默认数据:', error.message)
        this.venues = [
          { id: 1, name: '体育中心篮球场' },
          { id: 2, name: '奥林匹克羽毛球馆' }
        ]
      }
    },

    // 加载用户列表
    async loadUsers() {
      try {
        // 这里可以调用用户相关的API
        // const result = await userAPI.list({ current: 1, size: 100 })
        // 暂时使用模拟数据
        this.users = [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' }
        ]
      } catch (error) {
        console.warn('加载用户列表失败:', error.message)
      }
    },

    // 加载统计数据
    async loadStatistics() {
      try {
        // 这里可以调用统计相关的API
        // const stats = await orderAPI.getStatistics()
        // 暂时使用模拟数据
        this.stats = {
          pending: 15,
          paid: 128,
          completed: 89,
          refunded: 6
        }
      } catch (error) {
        console.warn('加载统计数据失败:', error.message)
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadOrderList()
    },

    // 重置
    handleReset() {
      this.searchForm = {
        orderSn: '',
        userName: '',
        venueName: '',
        orderStatus: '',
        periodDate: ''
      }
      this.handleSearch()
    },

    // 查看详情
    handleView(row) {
      this.currentOrder = row
      this.showDetailDialog = true
    },

    // 删除
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该订单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await orderAPI.removeById(row.id)
        this.$message.success('删除成功')
        this.loadOrderList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败: ' + error.message)
        }
      }
    },

    // 批量删除
    async handleBatchDelete() {
      if (this.selectedOrders.length === 0) {
        this.$message.warning('请选择要删除的订单')
        return
      }
      
      try {
        await this.$confirm(`确认删除选中的 ${this.selectedOrders.length} 个订单吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const ids = this.selectedOrders.map(order => order.id)
        await orderAPI.removeByIds(ids)
        
        this.$message.success('批量删除成功')
        this.selectedOrders = []
        this.loadOrderList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('批量删除失败: ' + error.message)
        }
      }
    },

    // 退款
    async handleRefund(row) {
      try {
        await this.$confirm('确认对该订单进行退款吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await orderAPI.refund({ orderId: row.id, refundAmount: row.payAmount })
        this.$message.success('退款成功')
        this.loadOrderList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('退款失败: ' + error.message)
        }
      }
    },

    // 支付
    async handlePay(row) {
      try {
        await this.$confirm('确认支付该订单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        
        await orderAPI.pay({ orderId: row.id, payAmount: row.payAmount })
        this.$message.success('支付成功')
        this.loadOrderList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('支付失败: ' + error.message)
        }
      }
    },

    // 导出
    handleExport() {
      this.$message.success('导出成功')
    },

    // 选择变更
    handleSelectionChange(selection) {
      console.log(selection)
     // this.selectedOrders = selection
    },

    // 场地变更
    handleVenueChange(venueId) {
      // 重置分区选择
      this.showDetailDialog = true
      this.orderForm.partitionId = null
    },

    // 用户变更
    handleUserChange(userId) {
      const userMap = {
        1: '张三',
        2: '李四'
      }
      this.orderForm.userName = userMap[userId] || ''
    },

    // 提交表单
    async handleSubmit() {
      try {
        await this.$refs.orderForm.validate()
        this.submitting = true
        
        await orderAPI.generateOrder(this.orderForm)
        this.$message.success('订单生成成功')
        this.showAddDialog = false
        this.resetForm()
        this.loadOrderList()
      } catch (error) {
        if (error !== false) {
          this.$message.error('订单生成失败: ' + error.message)
        }
      } finally {
        this.submitting = false
      }
    },

    // 重置表单
    resetForm() {
      this.orderForm = {
        venueId: null,
        partitionId: null,
        timePeriodId: 1,
        courtIndex: 1,
        periodDate: '',
        beginTime: '',
        endTime: '',
        userId: null,
        userName: '',
        payAmount: 0
      }
      this.$refs.orderForm && this.$refs.orderForm.resetFields()
    },

    // 分页
    handleSizeChange(size) {
      this.pagination.size = size
      this.loadOrderList()
    },

    handleCurrentChange(current) {
      this.pagination.current = current
      this.loadOrderList()
    },

    // 获取状态标签样式
    getStatusTagType(status) {
      const statusMap = {
        0: 'warning',  // 待支付
        1: 'success',  // 已支付
        2: 'info',     // 已完成
        3: 'danger',   // 已取消
        4: 'info'      // 已退款
      }
      return statusMap[status] || 'info'
    },

    // 获取状态标签文本
    getStatusLabel(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付',
        2: '已完成',
        3: '已取消',
        4: '已退款'
      }
      return statusMap[status] || '未知'
    },

    // 格式化时间
    formatTime(timeObj) {
      if (!timeObj) return ''
      const hour = String(timeObj.hour).padStart(2, '0')
      const minute = String(timeObj.minute).padStart(2, '0')
      return `${hour}:${minute}`
    },

    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      return dateTime.replace('T', ' ').substring(0, 19)
    }
  }
}
</script>

<style scoped>
.order-management {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1d39c4;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(29, 57, 196, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.stat-icon.pending {
  background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
}

.stat-icon.paid {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
}

.stat-icon.completed {
  background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
}

.stat-icon.refunded {
  background: linear-gradient(135deg, #ab47bc 0%, #8e24aa 100%);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #1d39c4;
  line-height: 1;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.search-form {
  margin-bottom: 0;
}

.table-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #1d39c4;
}

.table-actions {
  display: flex;
  gap: 10px;
}

.amount {
  font-weight: 600;
  color: #f56c6c;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.dialog-footer {
  text-align: right;
}

.order-detail {
  padding: 10px 0;
}

/* Element UI 样式覆盖 */
::v-deep .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

::v-deep .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

::v-deep .el-input__inner {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

::v-deep .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

::v-deep .el-select .el-input__inner {
  border-radius: 8px;
}

::v-deep .el-table {
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .el-table th {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  color: #1d39c4;
  font-weight: 600;
  border: none;
}

::v-deep .el-table td {
  border: none;
  border-bottom: 1px solid #f0f2f5;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fafbff;
}

::v-deep .el-pagination {
  text-align: right;
}

::v-deep .el-pagination .el-pager li {
  border-radius: 6px;
  margin: 0 2px;
}

::v-deep .el-pagination .el-pager li.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

::v-deep .el-dialog {
  border-radius: 12px;
  overflow: hidden;
}

::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  padding: 20px 24px;
}

::v-deep .el-dialog__title {
  color: #1d39c4;
  font-weight: 600;
  font-size: 18px;
}

::v-deep .el-form-item__label {
  color: #1d39c4;
  font-weight: 500;
}

::v-deep .el-tag {
  border-radius: 6px;
  font-weight: 500;
}

::v-deep .el-descriptions__label {
  color: #1d39c4;
  font-weight: 600;
}

::v-deep .el-card__body {
  padding: 20px;
}

@media (max-width: 768px) {
  .order-management {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .stats-row {
    margin-bottom: 15px;
  }
  
  .search-form {
    display: block;
  }
  
  .search-form .el-form-item {
    display: block;
    margin-bottom: 15px;
  }
  
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .table-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>